<template>
  <div>
    <van-nav-bar
      title="新峰商城"
      left-text="列表"
      right-text="登录"
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <div class="center">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item>
          <img :src="img.images[0]" alt="" />
        </van-swipe-item>
        <van-swipe-item> <img :src="img.images[1]" alt="" /> </van-swipe-item>
        <van-swipe-item> <img :src="img.images[3]" alt="" /> </van-swipe-item>
        <van-swipe-item> <img :src="img.images[4]" alt="" /> </van-swipe-item>
        <van-swipe-item> <img :src="img.images[2]" alt="" /> </van-swipe-item>
      </van-swipe>
      <van-grid :column-num="4">
        <van-grid-item
          v-for="value in 8"
          :key="value"
          icon="photo-o"
          text="文字"
        />
      </van-grid>
      <div v-for="(item, index) in listData" :key="index">
        <div class="shopbox" @click="toitem(item.id)">
          <img :src="item.img" alt="" />
          <p class="name">{{ item.name }}</p>
          <p class="desc">{{ item.desc }}</p>
          <p class="price">￥{{ item.price }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang='ts' setup>
import { showToast } from "vant";
import { useRouter } from "vue-router";
import { ref, reactive, onMounted } from "vue";
import { getalllist } from "../../../api/api";

const router = useRouter();

const img = reactive({
  images: [
    "./img/1.jpg",
    "./img/2.jpg",
    "./img/3.jpg",
    "./img/4.jpg",
    "./img/5.jpg",
  ],
});

onMounted(() => {
  render();
});

// 数据
let listData = ref();

const render = () => {
  getalllist().then((res) => {
    listData.value = res.data.data;
  });
};

// 点击跳转到列表
const onClickLeft = () => {
  router.push("/list");
};

// 点击跳转到登录
const onClickRight = () => {
  router.push("/login");
};

// 跳转到详情
const toitem = (id: number) => {
  router.push(`/item/${id}`);
};
</script>

<style scoped>
.my-swipe .van-swipe-item {
  color: #fff;
  text-align: center;
}
img {
  width: 375px;
  height: 150px;
}
.shopbox {
  float: left;
  padding: 6px;
  margin-bottom: 10px;
}
.shopbox img {
  width: 170px;
  height: 150px;
}
.name {
  font-weight: bold;
}
.price {
  color: red;
}
.center {
  height: calc(100vh - 100px);
  overflow: auto;
}
</style>
